<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/hello2.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/hello.js"></script>
    <script type="text/javascript" src="js/hello.extension.js"></script>
    <script type="text/javascript" src="js/hello2.js"></script>
</head>

<body>
    ①插件hello:
    <div id="divMyPlugin1" class="easyui-hello" data-options="to:'world', myColor:'red'">点我sayHello一次</div>
    <div id="divMyPlugin2" class="easyui-hello" data-options="to:'world', repeatTimes:3, myColor:'green', some:'aaa', howToSay:customeHowToSay">点我sayHello三次
    </div>
    <button onclick="invokePluginMethod()">调用插件的方法</button>
    <button onclick="invokePluginExMethod()">调用插件的拓展方法</button>
    <button onclick="$('#divMsg').empty()">Clear</button>

    <hr /> ②继承自hello的插件hello2:
    <div id="divMyPlugin3" class="easyui-hello2" data-options="to:'world', myColor:'orange' , howToSay:customeHowToSay">
        点我sayHello一次，输入名字：</div>
    <button onclick="invokePluginMethod2()">调用插件的方法（hello2）</button>

    <hr /> Log:
    <div id="divMsg">

    </div>
    <script type="text/javascript">
        function invokePluginMethod() {
            $('#divMyPlugin2').hello('sayHello');
        }

        function invokePluginMethod2() {
            $('#divMyPlugin3').hello2('sayHello');
        }

        function invokePluginExMethod() {
            $('#divMyPlugin2').hello('sayHi');
        }

        function customeHowToSay(to) {
            $('<p></p>').html('你好, <span style="color:red">' + to + '<span>!' + new Date().getTime()).appendTo($('#divMsg'));
        }
    </script>


</body>

</html>